<template>
  <el-dialog
      v-if="formData"
      v-model="openBoole"
      :close-on-click-modal="false"
      :title="title"
      custom-class="mydialog"
      width="1000px"
      @close="close"
  >
    <el-form ref="openRef" :model="openForm" :rules="rules" label-width="100px" size="small">
      <el-row gutter="40">
        <el-col :span="8">
          <el-form-item label="终端名称：">
            <span>{{ formData.terminalName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="终端类型：">
            <span>{{ getLabel('app_mode', formData.terminalType) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="子分类：">
            <span v-if="formData.terminalType === 'first_terminal'"> {{
                getLabel('first_terminal', formData.childProperty)
              }}</span>
            <span v-if="formData.terminalType === 'second_terminal'"> {{
                getLabel('second_terminal', formData.childProperty)
              }}</span>
            <span v-if="formData.terminalType === 'third_terminal'"> {{
                getLabel('third_terminal', formData.childProperty)
              }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="0" prop="qualifications">
            <div class="qualityFiles-container">
              <div v-for="(item,index) in openForm.qualifications" :key="index" class="file-item">
                <image-upload-view ref="imageUploadView" :data="item"/>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer" style="display:flex;justify-content:center;align-items:center;">
        <el-button class="border-btn" size="small" style="margin-right: 20px;" @click="close">取消</el-button>
        <el-button class="main-btn" size="small" type="primary" @click="handlSubmit">提交审核</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {getCurrentInstance, inject, reactive, toRefs} from 'vue'
import {crmStore} from '@CRM/store'

export default {
  name: 'Qualification',
  setup(props, context) {
    const validateCardFiles = (rule, value, callback) => {
      let conut = 0
      for (let i = 0; i < reactiveData.openForm.qualifications.length; i++) {
        const a = reactiveData.openForm.qualifications[i]
        if (a.url === '') {
          conut += 1
        } else {
          conut = 1000
          break
        }
      }
      if (conut === 1000) {
        callback()
      } else {
        callback(new Error('资质不能全为空'))
      }
    }
    const api = inject('api')
    const currentInstance = getCurrentInstance()
    var reactiveData = reactive({
      openBoole: false,
      title: '完善资质',
      openForm: {
        id: 0,
        qualifications: []
      },
      rules: {
        qualifications: [{required: true, validator: validateCardFiles, trigger: 'blur'}]
      },
      formData: null,
      openRef: null
    })

    const open = (obj) => {
      reactiveData.openForm = {
        id: 0,
        qualifications: []
      }
      reactiveData.openBoole = true
      reactiveData.formData = obj
      if (obj.qualifications !== null && obj.qualifications.length > 0) {
        reactiveData.openForm.qualifications = obj.qualifications
      } else {
        if (obj && obj.terminalType === 'second_terminal') {
          reactiveData.openForm.qualifications = JSON.parse(JSON.stringify(crmStore.getters['jsonData/getJsonData']['terminal_second_qualification'].data))
        } else {
          reactiveData.openForm.qualifications = JSON.parse(JSON.stringify(crmStore.getters['jsonData/getJsonData']['terminal_first_three_qualification'].data))
        }
      }

      reactiveData.openForm.id = obj.id
    }

    const close = () => {
      reactiveData.openBoole = false
    }

    const handlSubmit = () => {
      reactiveData.openRef.validate((valid) => {
        if (valid) {
          api.terminal.QUALIFICATIONS(reactiveData.openForm).then(res => {
            if (res.code === 0) {
              currentInstance.proxy.customMessage({type: 'success', message: '资质完善成功'})
              context.emit('qualificationsSuccsess')
              close()
            } else {
              currentInstance.proxy.customMessage({type: 'error', message: res.msg})
            }
          })
        }
      })
    }

    return {
      ...toRefs(reactiveData),
      open,
      close,
      handlSubmit
    }
  }
}

</script>

<style lang="scss" scoped>
.qualityFiles-container {
  display: flex;
  flex-wrap: wrap;
}
</style>
